<template>
    <!-- 
        1.dialog的显示与否是通过 :visible.sync的值来控制的
        2.close-on-click-modal="false"控制点击遮罩是否隐藏弹出层；
    -->
    <el-dialog title="编辑菜单" width="560px" :visible.sync="editUserDialogVisible" :close-on-click-modal="false">
        <!-- rules表示绑定我们自定义的规则 -->
        <el-form :model="editUser" :rules="rules" ref="editForm">
            <el-radio-group v-model="this.editUser.type" >
                <el-radio disabled  :label=0 >目录</el-radio>
                <el-radio disabled  :label=1 >菜单</el-radio>
                <el-radio disabled  :label=2 >按钮</el-radio>
            </el-radio-group>

<p v-if="this.editUser.type===0">

    <el-form-item label="目录标题" label-width="80px" prop="title" >
                <el-input v-model="editUser.title" autocomplete="off" placeholder="请输入标题；例：系统管理"></el-input>
            </el-form-item>
            <el-form-item  label="目录标识" label-width="80px" prop="name">
                <el-input disabled v-model="editUser.name" autocomplete="off" placeholder="请输入标识；例：SystemManager"></el-input>
            </el-form-item>
            <el-form-item label="目录路径" label-width="80px" prop="path">
                <el-input disabled v-model="editUser.path" autocomplete="off" placeholder="请输入路径；例：/sys"></el-input>
            </el-form-item>
            <el-form-item label="排序编号" label-width="80px" prop="orderNum">
                <el-input-number v-model="editUser.orderNum" controls-position="right" :min="0" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="目录图标" label-width="80px" prop="icon">
                <el-input v-model="editUser.icon" autocomplete="off" placeholder="请输入图标；例：el-icon-circle-plus"></el-input>
            </el-form-item>
        </p>

            <p v-else-if="this.editUser.type===1">
                <el-form-item label="菜单标题" label-width="80px" prop="title">
                <el-input v-model="editUser.title" autocomplete="off" placeholder="请输入标题；例：系统管理"></el-input>
            </el-form-item>
            <el-form-item disabled label="菜单标识" label-width="80px" prop="name">
                <el-input v-model="editUser.name" autocomplete="off" placeholder="请输入标识；例：SystemManager"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单" label-width="80px" prop="parentTitle">
                <template>
                <el-select disabled v-model="editUser.parentTitle" placeholder="请选择">
                    <el-option 
                    v-for="item in menus"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>

                <!-- <el-cascader  style="width:420px" label-width="100px"  autocomplete="off" v-model="editUser.parentTitle" :options="menus" :props="{ value: 'id', label: 'title', expandTrigger: 'hover' ,checkStrictly: true}"></el-cascader> -->
            </el-form-item>
            <el-form-item label="菜单路由" label-width="80px" prop="path">
                <el-input disabled v-model="editUser.path" autocomplete="off" placeholder="请输入路径；例：/sys">
                    <template slot="prepend">{{parentUrl}}</template>
                </el-input>
            </el-form-item>
            <el-form-item
                prop="hidden"
                label="是否隐藏"
                width="180">
                <el-switch
                    v-model="editUser.hidden"
                    active-color="#40de5a"
                    inactive-color="#808080"
                    :active-value=true
                    :inactive-value=false>
                </el-switch> 
            </el-form-item>
            <el-form-item label="排序编号" label-width="80px" prop="orderNum">
                <el-input-number v-model="editUser.orderNum" controls-position="right"  :min="0" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="菜单图标" label-width="80px" prop="icon">
                <el-input v-model="editUser.icon" autocomplete="off" placeholder="请输入图标；例：el-icon-circle-plus"></el-input>
            </el-form-item>
            </p>
            
         <p v-else>
            <el-form-item label="目录标题" label-width="80px" prop="title">
                <el-input v-model="editUser.title" autocomplete="off" placeholder="请输入标题；例：系统管理"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单" label-width="80px" prop="parentTitle">
                <template>
                <el-select disabled v-model="editUser.parentTitle" placeholder="请选择">
                    <el-option 
                    v-for="item in menus"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>

                <!-- <el-cascader  style="width:420px" label-width="100px"  autocomplete="off" v-model="editUser.parentId" :options="menus" :props="{ value: 'id', label: 'title', expandTrigger: 'hover' ,checkStrictly: true}"></el-cascader> -->
            </el-form-item>
            <el-form-item  label="授权标识" label-width="80px" prop="perms">
                <el-input disabled v-model="editUser.perms" autocomplete="off" placeholder="请输入标识；例：SystemManager"></el-input>
            </el-form-item>
         </p>
           
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="() => editUserDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureEdit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
// import axios from 'axios'
import  VueCookies  from 'vue-cookies'
import http from '@/utils/request.js'
export default {
    data() {
        return {
            radio: 0,
            // editUserDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
            editUserDialogVisible: false,
            editUser: {
                title: '',
                name:'',
                path: '',
                icon:'',
                parentId:'',
                type:0,
                hidden:false,
                parentTitle:'',
                orderNum:0,
                perms:''
                
            },
            menus:[],
            // 定义校验规则
            rules: {
                title: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: false, trigger: 'blur' }
                ],
                name: [
                    { required: false, trigger: 'blur' }
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    // { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                    //     message: '邮件不符合规则', trigger: 'blur'}
                ],
                path: [
                    { required: false, trigger: 'blur' },
                ],
                icon: [
                    { required: false, trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
        this.goto()
     },    
    methods: {


        goto(type=this.radio){

                    http.get(`menu/${type}`).then(res => {
                    console.log(res)
                    this.menus = res
                    })
                },

        // 根据id查询，然后回显数据
        getById(id) {
            http.get(`showmenu/${id}`).then(res => {
                // res.data 就是用户数据
                this.editUser = res
            }) 
            
        },
        // 用户确认编辑
        async sureEdit() {
           
            if(!this.radio===0){
                this.editUser.parentId = this.editUser.parentId.reverse()[0]
            }
            this.editUser.createBy = VueCookies.get('username')

            try {
                // 通过await的方式校验表单的时候，如果校验不通过，this.$refs.editForm.validate()
                // 会抛出异常
                await this.$refs.editForm.validate()
                // 代码如果能走下来，表示校验通过
                await http.put(`usermenu`, this.editUser)
                // 编辑成功的提示消息
                this.$message({ message: '编辑成功', type: 'success', duration: 1000})
                // 隐藏模态框
                this.editUserDialogVisible = false
                // 重新查询数据
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        },
        menuagain(){
        this.goto()
      }
    },
    computed:{
        parentUrl:function(){
            let path 
            this.menus.forEach(item =>{
                if (item.id == this.editUser.parentId) {
                    path = item.path
                }
            })
            return path
        }
    }
}
</script>

<style>

</style>